<template>
<!-- swiper的bug 如果数据是从网络获取，那么自动轮播到最后一页之后就不轮播了 -->
<!-- 解决办法 在swiper组件上面加v-if="数据.length > 0" -->
    <swiper :options='swiperOption' class="banner" v-if="banners.length > 0">
        <swiper-slide v-for="value in banners" :key="value.bannerId" class="item">
            <a :href="value.url">
                <img :src="value.pic" alt="">
            </a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Banner',
  data () {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        observer: true,
        observerParents: true,
        observerSlideChildren: true
      }
    }
  },
  props: {
    banners: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style scoped lang='scss'>
@import "../../assets/css/mixin";
@import "../../assets/css/variable";
.banner{
  @include bg_sub_color();
    .item{
        img{
            width: 100%;
            height: 300px;
            border-radius: 36px;
            transform: scale(0.95);
        }
    }

}
</style>
<style lang='scss'>
@import "../../assets/css/mixin";
.swiper-pagination{
  margin-bottom: 8px;
}
    .swiper-pagination-bullet{
        width: 20px;
        height: 4px;
        background-color: #fff;
        opacity: .5;
    }
    .swiper-pagination-bullet-active{
        @include bg_color()
    }
</style>
